<template>
	<scroll-view scroll-y="true" :style="{height: contentHeight + 'px'}" :scroll-into-view="intoView" :scroll-with-animation="true">
		<view v-for="(item, index) in abilityEntity" :key="item.id" class="month-item" :id="'question'+item.id">
			<text class="month-title" :class="{'month-title-color': index === beginMonthIndex}">{{item.month}}月龄题目{{index === beginMonthIndex ? '(主测月龄)':''}}</text>
			<view v-for="(question, qIndex) in item.questions" :key="question.id" class="question-item" :class="{'question-item-opacity': item.disabled !== false && evaluateType !=='enterprise' && dimensionId !== WARNING_DIMENSION_ID,'question-item-begin': index === beginMonthIndex && qIndex === 0}">
				<view @click="helpClick(index, qIndex)" class="help-view">
					<text style="margin-right: 11rpx;">操作方法</text>
					<icon type="info" color="#999999" size="10"></icon>
				</view>
				<text class="title">{{question.indexOnPaper}}、{{question.title}}</text>
				<view class="answer-view">
					<view class="answer-pass" :class="question.check === '1' ? 'answer-pass-check':''" @click="radioChange('1', index, qIndex)">
						<view class="round" :class="question.check === '1' ? 'round-check':''"></view>
						<text>通过</text>
					</view>
					
					<view class="answer-nopass" :class="question.check === '0' ? 'answer-nopass-check':''" @click="radioChange('0', index, qIndex)">
						<view class="round" :class="question.check === '0' ? 'round-check':''"></view>
						<text>不通过</text>
					</view>
				</view>
				<image v-if="index === beginMonthIndex && qIndex === 0" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/assess-icon-tip.png" class="tip" ></image>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			dimensionId: {
				type: String,
				default (){
					return ''
				}
			},
			birthday:{
				type: String,
				default () {
					return ''
				}
			},
			evaluateType:{
				type: String,
				default () {
					return ''
				}
			},
			index: {
				type: Number,
				default() {
					return -1
				}
			},
			dimensionIndex: {
				type: Number,
				default() {
					return -1
				}
			}
		},
		watch:{
		    dimensionId(newVal,oldVal){
				if(newVal != oldVal){
					this.getFullEvaluateItems();
				}
			},
			
			dimensionIndex(newVal,oldVal){
				if (this.indexT === this.index) {
					return;
				}
				if (newVal === this.index) {
					this.pageScrollToFirst();
					this.indexT = this.index;
				}
			},
		},
		data() {
			return {
				WARNING_DIMENSION_ID: '2c92848567977b50016797a129d909b4',
				abilityEntity: [
					
				],

				firstMonthIndex: 0,
				//开始的月龄序号
				beginMonthIndex: 0,
				lastMonthIndex: 0,
				
				intoView: '',
				contentHeight: 0,
			};
		},
		created() {
			wx.getSystemInfo({
			  success: res => {
				  let bottomHeight = uni.upx2px(120);
				  let safeHeight = res.screenHeight - res.safeArea.bottom;
				  if (this.evaluateType === 'enterprise') {
					  let topHeight = uni.upx2px(90);
					  this.contentHeight = res.windowHeight - bottomHeight - safeHeight - topHeight;
				  } else {
					  this.contentHeight = res.windowHeight - bottomHeight - safeHeight;
				  }
			  }
			})
			this.getFullEvaluateItems();
		},

		methods: {
			evaluateFinish() {
				if (this.dimensionId === this.WARNING_DIMENSION_ID) {
					return true;
				}
				if (!this.finishedFront(this.firstMonthIndex) && this.firstMonthIndex !== 0) {
					uni.showToast({
						icon: 'none',
						title: '向前测查需要连续2个月龄的项目均通过',
						duration: 3000,
					});
					this.pageScrollTo(this.firstMonthIndex - 1);
					return false;
				}
				if (!this.finishedAfter(this.lastMonthIndex) && this.lastMonthIndex !== this.abilityEntity.length - 1) {
					uni.showToast({
						icon: 'none',
						title: '向后测查需要连续2个月龄的项目均不通过',
						duration: 3000,
					});
					this.pageScrollTo(this.lastMonthIndex + 1);
					return false;
				}
				return true;
			},
			
			//获取做的最小月龄
			getFirstMonth() {
				for (let dIndex in this.abilityEntity) {
					let item = this.abilityEntity[dIndex];
					for (let qIndex in item.questions) {
						let question = item.questions[qIndex];
						if (question.check === '1' || question.check === '0') {
							return dIndex;
						}
					}
				}
				return 0;
			},
			
			//最前面的月龄是否连续通过
			hasMonthPass() {
				if (this.dimensionId === this.WARNING_DIMENSION_ID) {
					return true;
				}
				let firstMonthIndex = this.getFirstMonth();
				console.log(`firstMonth:${firstMonthIndex}`);
				return !this.hasFail(firstMonthIndex);
			},
			
			getVal () {
				let answers = [];
				for (let dIndex = this.firstMonthIndex ; dIndex <= this.lastMonthIndex; dIndex++){ 
					let item = this.abilityEntity[dIndex];
					if (this.isDisabled(dIndex) === false) {
						for (let qIndex in item.questions) {
							let question = item.questions[qIndex];
							if (question.check === '1' || question.check === '0') {
								let answer = {};
								answer.qid = question.id;
								answer.checked = question.check === '1' ? true : false;
								// answer.name = question.title;
								answers.push(answer);
							}
						}
					}
				}
				return answers;
			},
			
			radioChange(value, dIndex, qIndex) {
				console.log(this.abilityEntity.id);
				if (this.isDisabled(dIndex) !== false) {
					return;
				}
				
				let item = this.abilityEntity[dIndex];
				if (this.evaluateType === 'enterprise') {
					if (item.questions[qIndex].check === value) {
						item.questions[qIndex].check = undefined;
						this.abilityEntity.splice(dIndex, 1, item);
						return;
					}
				}
				item.questions[qIndex].check = value;
				this.abilityEntity.splice(dIndex, 1, item);
				
				if (dIndex === 0){
					this.firstMonthIndex = dIndex;
					// return;
				}
				if (dIndex === this.abilityEntity.length -1) {
					this.lastMonthIndex = dIndex;
					// return;
				}
				
				if (this.isFinished(dIndex)) {
					if (this.beginMonthIndex === dIndex) {
						//第一个月龄题目
						console.log('change:' + dIndex)
						if (dIndex !== this.abilityEntity.length - 1) {
							this.unlockAfterAbility(dIndex);
						}
						if (dIndex !== 0) {
							this.unlockFrontAbility(dIndex);
						}
						this.pageScrollTo(this.beginMonthIndex - 1);
					} else {
						if (dIndex > this.beginMonthIndex) {
							//向后测查
							if (this.lastMonthIndex < dIndex) {
								this.lastMonthIndex = dIndex;
							}
							if (this.isLast(dIndex)) {
								//当前最后一个 解锁后面的题目
								this.unlockAfterAbility(dIndex);
							} else {
								//当前不是最后一个月龄题目，需要重制后面的月龄题目
								this.remakeAfter(dIndex);
							}
						}else if (dIndex < this.beginMonthIndex) {
							//向前测查
							if (this.firstMonthIndex > dIndex) {
								this.firstMonthIndex = dIndex;
							}
							if (this.isFirst(dIndex)) {
								//当前第一个 解锁前面的题目
								this.unlockFrontAbility(dIndex);
							} else {
								//当前不是第一个月龄题目，需要重制前面的月龄题目
								this.remakeFront(dIndex);
							}
						}
					}
				}
			},
			
			//解锁后面题目
			unlockAfterAbility(dIndex){
				console.log('unlockAfterAbility:' + dIndex);
				let hasPass = this.hasPass(dIndex);
				if (hasPass) {
					//当前月龄有通过的题目,解锁下一题
					this.disableItem(dIndex + 1, false);
					this.pageScrollTo(dIndex + 1);
				} else {
					//当前月龄没有通过的题目
					if (this.finishedAfter(dIndex)) {
						//连续两个月龄都是不通过，表示向后测查结束
						this.remakeAbility(dIndex + 1);
						if (this.evaluateType === 'pro' && this.dimensionId !== this.WARNING_DIMENSION_ID) {
							uni.showToast({
								icon: 'none',
								title: '向后连续2个月的项目均不通过则测查结束',
								duration: 3000,
							})
						}
						if (!this.finishedFront(this.firstMonthIndex)) {
							this.pageScrollTo(this.firstMonthIndex - 1);
						}
					} else {
						this.disableItem(dIndex + 1, false);
						this.pageScrollTo(dIndex + 1);
					}
				}
			},
			//解锁前面题目
			unlockFrontAbility(dIndex) {
				console.log('unlockFrontAbility:' + dIndex);
				let hasFail = this.hasFail(dIndex);
				if (hasFail) {
					//当前月龄有没通过的题目，解锁上一题
					this.disableItem(dIndex - 1, false);
					this.pageScrollTo(dIndex - 1);
				} else {
					//当前月龄都通过，检查是否连续两个月龄都通过
					if (this.finishedFront(dIndex)) {
						//连续两个月龄都是通过，表示向前测查结束
						this.remakeAbility(dIndex - 1);
						if (this.evaluateType === 'pro' && this.dimensionId !== this.WARNING_DIMENSION_ID) {
							uni.showToast({
								icon: 'none',
								title: '向前连续2个月的项目均通过则测查结束',
								duration: 3000,
							})
						}
						if (!this.finishedAfter(this.lastMonthIndex)) {
							this.pageScrollTo(this.lastMonthIndex + 1);
						}
					} else {
						this.disableItem(dIndex - 1, false);
						this.pageScrollTo(dIndex - 1);
					}
				}
			},
			
			//当前月龄题目是否做完
			isFinished(dIndex) {
				let questions = this.abilityEntity[dIndex].questions;
				
				let finished = true;
				for (let index in questions){
					let question = questions[index];
					if (question.check === undefined) {
						finished = false;
					}
				}
				console.log('finished:' + finished);
				return finished;
			},
			
			//当前月龄题目 有通过的题目
			hasPass(dIndex) {
				if (dIndex < 0 || dIndex > this.abilityEntity.length -1) {
					return true;
				}
				let pass = false;
				let questions = this.abilityEntity[dIndex].questions;
				for (let index in questions){
					let question = questions[index];
					if (question.check === '1' || question.check === undefined) {
						pass = true;
					}
				}
				console.log('isAllPass:' + dIndex + pass);
				return pass;
			},
			//当前月龄题目 有没通过的题目
			hasFail(dIndex) {
				if (dIndex < 0 || dIndex > this.abilityEntity.length -1) {
					return true;
				}
				let fail = false;
				let questions = this.abilityEntity[dIndex].questions;
				for (let index in questions){
					let question = questions[index];
					console.log(question.check);
					if (question.check === '0' || question.check === undefined) {
						fail = true;
					}
				}
				console.log('isAllFail:' + dIndex + fail);
				return fail;
			},
			
			//更新解锁状态
			disableItem(dIndex, lock) {
				if (dIndex >= 0 && dIndex <= this.abilityEntity.length -1){
					let item = this.abilityEntity[dIndex];
					item.disabled = lock;
					this.abilityEntity.splice(dIndex, 1, item);
				}
			},
			
			//向后测查结束
			finishedAfter(dIndex) {
				if (dIndex === this.abilityEntity.length - 1) {
					return true;
				}
				
				let finished = false;
				if (dIndex !== this.beginMonthIndex + 1) {
					let pass1 = this.hasPass(dIndex);
					let pass2 = this.hasPass(dIndex - 1);
					if (!pass1 && !pass2) {
						finished = true;
					}
				}
				console.log('finishedAfter:'+ finished + dIndex);
				return finished;
			},
			
			//向前测查结束
			finishedFront(dIndex) {
				let finished = false;
				if (dIndex !== this.beginMonthIndex - 1) {
					let fail1 = this.hasFail(dIndex);
					let fail2 = this.hasFail(dIndex + 1);
					if (!fail1 && !fail2) {
						finished = true;
					}
				}
				console.log('finishedFront:'+ finished + dIndex);
				return finished;
			},
			
			//当前月龄题目是否是最后一个
			isLast(dIndex) {
				if (this.isFinished(dIndex + 1)) {
					return false;
				}
				return true;
			},
			
			//当前月龄题目是否是最前面一个
			isFirst(dIndex) {
				if (this.isFinished(dIndex - 1)) {
					return false;
				}
				return true;
			},
			
			//重制前面的题目
			remakeFront(dIndex) {
				if (this.finishedFront(dIndex)) {
					for (let i = dIndex - 1; i >= this.firstMonthIndex - 1; i--){ 
						this.remakeAbility(i);
					}
					this.firstMonthIndex = dIndex;
				} else {
					if (dIndex < this.firstMonthIndex) {
						this.disableItem(dIndex, false);
						return;
					}
					this.remakeFront(dIndex - 1);
				}
			},
			
			//重制后面的题目
			remakeAfter(dIndex) {
				console.log(dIndex + ':' + this.lastMonthIndex + ':' + this.abilityEntity.length)
				if (this.finishedAfter(dIndex)) {
					for (let i = dIndex + 1; i <= this.lastMonthIndex + 1; i++){ 
						this.remakeAbility(i);
					}
					this.lastMonthIndex = dIndex;
					return;
				}else {
					if (dIndex > this.lastMonthIndex) {
						this.disableItem(dIndex, false);
						return;
					}
					this.remakeAfter(dIndex + 1);
				}
			},
			
			remakeAbility(dIndex) {
				console.log('remakeAbility:' + dIndex + ':' + this.abilityEntity.length);
				if (dIndex >= this.abilityEntity.length) {
					return;
				}
				let item = this.abilityEntity[dIndex];
				item.disabled = true;
			
				let questions = item.questions;
				for (let index in questions){
					let question = questions[index];
					question.check = undefined;
				}
				
				this.abilityEntity.splice(dIndex, 1, item);
			},
			
			isDisabled(index) {
				if (this.evaluateType === 'enterprise'){
					return false;
				}
				if (this.dimensionId === this.WARNING_DIMENSION_ID) {
					return false;
				}
				return this.abilityEntity[index].disabled;
			},
			
			helpClick(index, qIndex) {
				if (this.isDisabled(index) !== false) {
					return;
				}
				let question = this.abilityEntity[index].questions[qIndex];
				let dimensionName = this.abilityEntity[index].dimensionName;
				let data = JSON.stringify(question);
				uni.navigateTo({
					url: 'evaluate-operation?questionId=' + question.id + '&dimensionName= ' + dimensionName,
				})
			},
			
			pageScrollTo(index) {
				console.log('pageScrollTo:' + index + ':' + this.abilityEntity.length);
				if (this.evaluateType === 'enterprise') {
					return;
				}
				if (this.dimensionId === this.WARNING_DIMENSION_ID) {
					return ;
				}
				if (index >= this.abilityEntity.length || index < 0) {
					return;
				}
				let id = `question${this.abilityEntity[index].id}`;
				console.log(id);
				this.intoView = id;
			},
			
			pageScrollToFirst() {
				let id = `question${this.abilityEntity[this.beginMonthIndex].id}`;
				console.log(id);
				this.intoView = id;
			},
			
			getFullEvaluateItems() {
				uni.showLoading({})
				this.$http.request({
					url: '/eapi/operator/full_evaluate_items',
					method: 'POST',
					params: {
						dimensionId: this.dimensionId,
						birthday: this.birthday,
					},
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					for (let position = 0; position < res.data.length; position++){
						if (res.data[position].beginAt) {
							this.beginMonthIndex = position;
							this.firstMonthIndex = position;
							this.lastMonthIndex = position;
						}
					}
					this.abilityEntity = res.data;
					this.abilityEntity[this.beginMonthIndex].disabled = false;
					if (this.evaluateType === 'pro') {
						let that = this;
						setTimeout(function() {
							that.pageScrollToFirst();
						}, 300)
					} else {
						if (this.index === 0) {
							let that = this;
							setTimeout(function() {
								that.pageScrollToFirst();
							}, 300)
						}
					}
				}).catch(err => {
					console.log(err);
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style lang="scss">
	.month-item{
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.month-title{
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
		}
		
		.month-title-color{
			color: #000000;
		}

		.question-item{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 30rpx 40rpx 30rpx;
			margin: 10rpx 0rpx 20rpx 0rpx;
			opacity: 1.0;
			position: relative;
			
			.tip{
				position: absolute;
				top: 0rpx;
				left: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
			
			.help-view{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
			}
			
			.title{
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
				margin-top: 19rpx;
			}
			
			.answer-view{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				margin-top: 40rpx;
				
				.answer-pass{
					width: 156rpx;
					height: 70rpx;
					background: #FFFFFF;
					border: 1rpx solid #05CA89;
					border-radius: 10rpx;
					
					display: flex;
					justify-content: center;
					align-items: center;
					
					font-size: 24rpx;
					font-weight: 600;
					color: #05CA89;
					line-height: 48rpx;
					
					.round{
						position: relative;
						display: inline-block;
						width: 22rpx;
						height: 22rpx;
						background: #FFFFFF;
						border: 1px solid #05CA89;
						border-radius: 50%;
						margin-right: 11rpx;
					}
					
					.round-check::after {
					    content: "";
					    position: absolute;
					    left: 5rpx;
					    top: 6rpx;
					    width: 50%;
					    height: 25%;
					    border: 2rpx solid #05CA89;
					    border-radius: 1rpx;
					    border-top: none;
					    border-right: none;
					    background: transparent;
					    transform: rotate(-45deg);
					}
				}
				
				.answer-pass-check{
					background: #05CA89;
					color: #FFFFFF;
				}
				
				.answer-nopass{
					width: 156rpx;
					height: 70rpx;
					background: #FFFFFF;
					border: 1rpx solid #FA4F3A;
					border-radius: 10rpx;
					
					display: flex;
					justify-content: center;
					align-items: center;
					
					font-size: 24rpx;
					font-weight: 600;
					color: #FA4F3A;
					line-height: 48rpx;
					margin-left: 30rpx;
					
					.round{
						position: relative;
						display: inline-block;
						width: 22rpx;
						height: 22rpx;
						background: #FFFFFF;
						border: 1px solid #FA4F3A;
						border-radius: 50%;
						margin-right: 11rpx;
					}
					
					.round-check::after {
					    content: "";
					    position: absolute;
					    left: 5rpx;
					    top: 6rpx;
					    width: 50%;
					    height: 25%;
					    border: 2rpx solid #FA4F3A;
					    border-radius: 1rpx;
					    border-top: none;
					    border-right: none;
					    background: transparent;
					    transform: rotate(-45deg);
					}
				}
				
				.answer-nopass-check{
					background: #FA4F3A;
					color: #FFFFFF;
				}
			}
		}
		
		.question-item-opacity{
			opacity: 0.4;
		}
		
		.question-item-begin{
			border-style: solid;
			border-width: 5rpx;
			border-color: $app-main-color;
			// background-color: $app-main-color;
		}
	}
</style>
